#{extends 'simpleTemplate.html' /}
<title>&{'Wiki_header'}</title>

<link href="@{'/public/css/taskboard.css'}" rel="stylesheet">
<link href="@{'/public/css/jqcloud.css'}" rel="stylesheet">
<script type="text/javascript" src="@{'/public/js/jCloud/jqcloud-1.0.3.js'}"></script>

<script type="text/javascript">
    // tag cloud
    var word_list = [
        #{list items: tagsList, as:"tag"}
            {text:"${tag.name}", weight:${tag.weight}, link:"/listByTag?tag=${tag.name}"},
        #{/list}
    ];

    $(function () {
        $("#tagsCloud").jQCloud(word_list);
    });
</script>

<div class="content">
    <div class="content-header">
        <a class="btn btn-primary" href="@{wiki.WikiController.saveNewPage}">&{'Wiki_add_new'}...</a>
        <h3>&{'Wiki_page_list'}</h3>
    </div>

    <div class="content-wiki" id="list" style="width: 15%;height: 460px;">
        <ul>
            #{list items: topManyList, as:"page"}
            <li>
                <a href="/showPage?id=${page.id}">${page.name}</a>
            </li>
            #{/list}
        </ul>
        <a class="btn btn-primary" style="margin-top: 20px;" href="/articleList">&{'Wiki_show_all'}</a>
    </div>
    <div>
        #{list items: topShortList, as:"page"}
        <div class="tb-column" id="page_01">

            <div class="tb-column-header">${page.name}</div>
            <div class="tb-task-content">${page.summaryHtml()}</div>

            <div class="tb-add-item">
                <a class="btn btn-primary" href="/showPage?id=${page.id}">&{'Wiki_show'}</a>
            </div>

        </div>
        #{/list}

    </div>
    <div id="tagsCloud" style="width: 300px; height: 200px"></div>
    <!--
    <div id="state1" style="background-color: #ccc;padding:5px;border:solid 1px black;height:210px;width:400px;
    float:left;position:relative;top:10px;left:20px;">
        Первая статья
        <a class="btn btn-primary" style="position:relative;top:180px;left:210px;">Show</a>
    </div>

    <div id="state2" style="background-color: #ccc;padding:5px;border:solid 1px black;height:210px;width:400px;
    float:left;position:relative;top:10px;left:40px;">
        Вторая статья
        <a class="btn btn-primary" style="position:relative;top:180px;left:210px;">Show</a>
    </div>

    <div id="state3" style="background-color: #ccc;padding:5px;border:solid 1px black;height:210px;width:400px;
    float:left;position:relative;top:30px;left:20px;">
        Третья статья
        <a class="btn btn-primary" style="position:relative;top:180px;left:215px;">Show</a>
    </div>

    <div id="state4" style="background-color: #ccc;padding:5px;border:solid 1px black;height:210px;width:400px;
    float:left;position:relative;top:30px;left:40px;">
        Четвертая статья
        <a class="btn btn-primary" style="position:relative;top:180px;left:190px;">Show</a>
    </div>  -->

</div>
